<template>
  <el-container>
    <el-header>Header</el-header>
    <el-container>
      <el-aside>
        <div class="菜单">
          <el-row class="tac">
            <el-col >
              <el-menu
                  default-active="2"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose">
                <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>个人中心</span>
                  </template>
                  <el-menu-item index="/kaiboshezhi">开播设置</el-menu-item>
                  <el-menu-item index="1-2">通知中心</el-menu-item>
                  <el-menu-item index="1-3">我的关注</el-menu-item>
                  <el-menu-item index="1-3">观看历史</el-menu-item>
                </el-submenu>
              </el-menu>
            </el-col>
          </el-row>
        </div>
      </el-aside>
      <el-main>
        <div style="float:left;font-size:x-large;margin-bottom:20px">
          开播设置
        </div>
        <div class="底部说明">
          使用第三方软件开播的用户点击开始直播后获取rtmp地址和推流码。
        </div>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>
                 <div class="头像">
          <div class="block">
            <el-avatar :size="70" :src="circleUrl">
            </el-avatar>
          </div>
        </div>
               <el-col class="用户名" span="8">
                 {{userName}}
        </el-col>
              <el-col class="直播间ID" >
                直播间ID：
                <el-button style="padding: 3px 0" type="text">{{roomId}}</el-button>
        </el-col>
            </span>
          </div>
          <div class="我的直播间地址">
            我的直播间地址：
            <br>
            <el-button style="margin-top:5px;padding: 3px 0" type="text">https://www.kesion.com/zhibojiekou/47308</el-button>
          </div>
        </el-card>
        <el-card class="box-card">
        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
          <el-form-item
              prop="liveTitle"
              label="房间标题"
              :rules="[
      { required: true, message: '请输入房间标题', trigger: 'blur' },
    ]">
            <el-input v-model="dynamicValidateForm.liveTitle"></el-input>
          </el-form-item>
          <el-form-item
              prop="liveAbstract"
              label="房间描述"
              :rules="[
      { required: true, message: '请输入房间描述', trigger: 'blur' },
    ]">
            <el-input v-model="dynamicValidateForm.liveAbstract"></el-input>
          </el-form-item>
          <el-form-item
              prop="rtmpPushUrl"
              label="你的rtmp地址">
            <el-input v-model="dynamicValidateForm.rtmpPushUrl"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="postinfo();getrtmp();">开始直播</el-button>
          </el-form-item>
          <div class="底部说明-1">
            每次重新开播，请在这里复制新的rtmp地址和直播码到你的直播软件中
            <br>
            当推流过程中发生卡顿，可以尝试重新复制rtmp地址到你的直播软件中，如果仍然无法解决，请联系客服。
            <br>
            开通直播即代表同意富吾号使用协议，请勿上传和直播色情、暴力、反动信息！
          </div>
        </el-form>

      </el-card>
        <el-card class="box-card">
          <el-col span="3" class="标题">
            直播封面:
          </el-col>
          <el-button size="small" type="primary">主要按钮</el-button>
          <div class="底部说明-1">
            支持 JPG、PNG格式，文件大小≤2M，建议尺寸1280*720，比例16：9。无法上传图片？尝试使用普通模式
          </div>
        </el-card>
        <el-card class="box-card">
          <el-col span="3" class="标题">
           开播公告:
          </el-col>
          <el-button size="small" type="primary">主要按钮</el-button>
        </el-card>

      </el-main>
    </el-container>
  </el-container>

</template>

<script>
export default {
  name: "kaiboshezhi",
  methods: {
    async getrtmp(zhibofanhui) {
      const {data: res} = await this.$http.get('url',{prarms:this.userID})
      this.zhibofanhui.msg=res.msg
      this.zhibofanhui.cmd=res.cmd
      this.zhibofanhui.data.code=res.data.code
      this.zhibofanhui.data.idLive=res.data.idLive
      this.zhibofanhui.data.rtmpPul=res.data.rtmpPul
      this.zhibofanhui.data.isPublished=res.data.isPublished
      this.zhibofanhui.data.codeMsg=res.data.codeMsg
      this.zhibofanhui.data.anchorUserId=res.data.anchorUserId
      this.zhibofanhui.data.token=res.data.token
      this.zhibofanhui.data.allowMic=res.data.allowMic
      this.zhibofanhui.data.rtmpPushUrl= res.data.rtmpPushUrl
      console.log(res)
    },
    async postinfo(kaiboinfo) {
      const {data: res} = await this.$http.post('url',{prarms:this.kaiboinfo})
    },
  },
  data() {
    return {
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      kaiboinfo:{
        cmd: "JoinRoom",
        seq: "5addf447-2e23-4284-a10c-b2afe0c4fe30",
        data: {
          userId: "0",
          roomId: "0",
          userName: "0",
          role: "anchor",
          liveCover: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F611%2F032413115329%2F130324115329-9.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624026254&t=4884d398869397d979cc0e3b34e5710d",
          token: "0",
          dynamicValidateForm: {
            liveTitle: '',
            liveAbstract: ''
          }
        }
      },
      zhibofanhui:
          {
            msg:"",
            data:{
              code:"",
              idLive:"",
              rtmpPul:"",
             isPublished:"",
              codeMsg:"",
              anchorUserId:"",
             token:"",
              allowMic:"",
              rtmpPushUrl:""
            },
            cmd:"",

          }
      }
    }
  ,
  handleOpen(key, keyPath) {
    console.log(key, keyPath);
  },
  handleClose(key, keyPath) {
    console.log(key, keyPath);
  },
  handleAvatarSuccess(res, file) {
    this.imageUrl = URL.createObjectURL(file.raw);
  },
}
</script>

<style scoped>

body > .el-container {
  margin-bottom: 40px;
}
body{ background-color:#EEEEEE}
.菜单{
  width:100%;
}
.头像{

  margin-right:95%
}
.text {
  font-size: 14px;
}
.item {
  padding: 18px 0;
}
.box-card {
  position:relative;
  width:100%;
  margin-bottom: 10px;
}
.用户名{
  position:absolute;
  top:15%;
  font-size:large;
}
.直播间ID
{
  position:absolute;
  top:17%;
  font-size:x-small;
  margin-right: 20%;
}
.我的直播间地址
{
  padding-left:2%;
  font-size:small;
}
.标题{
  font-size:large;
  margin-bottom: 1%;
  margin-top:1%;
}
.输入框
{
  margin-bottom: 2%;
  margin-top:2%;
  width:95%;
  float:left;
}
.输入框-2
{
  margin-bottom: 2%;
  margin-top:2%;
  width:95%;
  float:left;
}
.直播按钮{
  margin-top:20%;
  margin-bottom: 2%;
  float:left;
}
.底部说明{
  font-color: #d9d9d9;
  font-size:xx-small;
  margin-bottom:0%;
  margin-left:50%;
}
.底部说明-1{
  font-color: #d9d9d9;
  font-size:xx-small;
  margin-bottom:2%;
  margin-left:5%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
